<script setup>
import { getTopicListS00636, getUploadCountS00636 } from '@/api/productionManagement/topicMachinePannel'
import { getMachineList } from '@/api/machine'

import MqttServer from '@/socket/mqtt'
const key = ref(1)
let mqttServer = null
const domHeight = ref(0)
const tableData = ref([])
const machineList = ref([])
const keyResize = () => {
  nextTick(() => {
    setTimeout(() => {
      key.value++
    }, 100)

    const topicListDom = document.querySelector('.topic-list')
    domHeight.value = -(topicListDom.clientHeight + 'px')
  })
}

const machineStatus = computed(() => {
  const red = tableData.value.filter(item => item.type === 'red').length / 2
  const yellow = tableData.value.filter(item => item.type === 'yellow').length / 2
  const green = tableData.value.filter(item => item.type === 'green').length / 2
  const length = tableData.value.length / 2

  return {
    red,
    yellow,
    green,
    length
  }
})

const loadMachineData = async () => {
  const { data } = await getMachineList()
  console.log(data)
  machineList.value = data.map(item => ({ UName: item.UName, topic: item.topic }))
}

const loadData = async () => {
  const { data: topics } = await getTopicListS00636()

  if (mqttServer === null) {
    mqttServer = new MqttServer(topics)
  }
  const result = [...topics, ...topics]
  tableData.value = result.map(item => ({ topic: item, type: 'red', data: {} }))
  mqttServer.client.onMessageArrived = async message => {
    const machine = machineList.value.find(item => item.topic === message.topic)
    const label = machine ? machine.UName : null

    const response = await getUploadCountS00636({ topic: message.topic })

    let restartTotal = null

    if (response.total > 0) {
      const [first] = response.data
      restartTotal = first.total
    }

    const data = {
      mete: message.payloadString,
      topic: message.topic,
      data: JSON.parse(message.payloadString),
      metaData: {},
      label,
      restartTotal
    }

    const [topicMessage] = data.data.params
    const { dev_name, points = [] } = topicMessage
    // console.log(dev_name)

    const machineNumber = dev_name.split('Dev')[1] ? +dev_name.split('Dev')[1] : null

    const nconfig = {
      number: [],
      content: '{nt}时{nt}分钟{nt}秒'
    }

    const setConfig = {
      number: [],
      content: '{nt}时{nt}分钟'
    }

    let jd = 0

    if (machineNumber && machineNumber < 5) {
      const D146 = points.find(point => point.name === 'D146').value // 小时
      const D148 = points.find(point => point.name === 'D148').value // 分钟

      const C10 = points.find(point => point.name === 'C10').value // 分钟
      const C11 = points.find(point => point.name === 'C11').value // 分钟
      const C12 = points.find(point => point.name === 'C12').value // 分钟

      // setConfig.number = [+D146, +D148]
      // nconfig.number = [+C12, +C11, +C10]

      if (+D146 && +D148) {
        setConfig.number = `${+D146}时${+D148}分`
      } else if (+D146) {
        setConfig.number = `${+D146}时`
      } else if (+D148) {
        setConfig.number = `${+D148}分`
      }

      let setNumber = +D146 * 3600 + +D148 * 60 // 秒

      let currNumber = +C12 * 3600 + +C11 * 60 + +C10 //秒

      jd = (currNumber / setNumber) * 100 > 100 ? 100 : (currNumber / setNumber) * 100

      // setConfig.number = `${+D146}小时${+D148}分`
      nconfig.number = +C12 > 0 ? +C12 + '小时' : '' + `${+C11}分${+C10}秒`
    } else if (machineNumber === 5 || machineNumber === 6) {
      const Set_Hour = points.find(pointsItem => pointsItem.name === 'Set_Hour')?.value || 0
      const Set_Min = points.find(pointsItem => pointsItem.name === 'Set_Min')?.value || 0

      const Run_Sec = points.find(pointsItem => pointsItem.name === 'Run_Sec')?.value || 0 // 秒
      const Run_Sec2 = points.find(pointsItem => pointsItem.name === 'Run_Sec2')?.value || 0 // 分钟
      const Run_Hour = points.find(pointsItem => pointsItem.name === 'Run_Hour')?.value || 0 // 小时

      if (+Set_Hour && +Set_Min) {
        setConfig.number = `${+Set_Hour}时${+Set_Min}分`
      } else if (+Set_Hour) {
        setConfig.number = `${+Set_Hour}时`
      } else if (+Set_Min) {
        setConfig.number = `${+Set_Min}分`
      }

      nconfig.number = +Run_Hour > 0 ? +Run_Hour + '小时' : '' + `${+Run_Sec2}分${+Run_Sec}秒`
    } else if (machineNumber && machineNumber >= 7) {
      const Set_Hour = points.find(point => point.name === 'Set_Hour').value // 设置小时
      const Set_Min = points.find(point => point.name === 'Set_Min').value // 设置分钟

      const Run_Min2 = points.find(point => point.name === 'Run_Min2').value // 运行小时
      const Run_Sec2 = points.find(point => point.name === 'Run_Sec2').value // 运行分钟
      
      if (+Set_Hour && +Set_Min) {
        setConfig.number = `${+Set_Hour}时${+Set_Min}分`
      } else if (+Set_Hour) {
        setConfig.number = `${+Set_Hour}时`
      } else if (+Set_Min) {
        setConfig.number = `${+Set_Min}分`
      }

      // setConfig.number = `${+Set_Hour}小时${+Set_Min}分`
      nconfig.number = +Run_Min2 > 0 ? +Run_Min2 + '小时' : '' + `${+Run_Sec2}分`

      // setConfig.number = [+Set_Hour, +Set_Min]
      // nconfig.number = [+Run_Min3, +Run_Sec2, 0]

      let setNumber = +Set_Hour * 3600 + +Set_Min * 60 // 秒

      let currNumber = +Run_Min2 * 3600 + +Run_Sec2 * 60 //秒

      jd = (currNumber / setNumber) * 100 > 100 ? 100 : (currNumber / setNumber) * 100
    }
    const type = setConfig.number.length > 0 ? 'green' : 'yellow'
    const filterList = tableData.value.filter(item => item.topic === data.topic)
    console.log(dev_name,points);

    console.log(setConfig, nconfig, dev_name)

    if (filterList.length > 0) {
      filterList.map(item => {
        item.data = data.data
        item.nconfig = nconfig
        item.setConfig = setConfig
        item.type = type
        item.jd = jd
        item.label = label
        item.restartTotal = restartTotal
      })
    } else {
      tableData.value.push({
        topic: data.topic,
        data: data.data,
        setConfig,
        nconfig,
        type,
        jd,
        label,
        restartTotal
      })
    }
  }
}

onMounted(loadMachineData)
onMounted(loadData)

onMounted(() => {
  setTimeout(() => {
    key.value++
  }, 100)

  window.addEventListener('resize', keyResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', keyResize)
})
</script>

<template>
  <div class="ps_w_h_100">
    <dv-border-box1 :key="key">
      <div class="topic-tool">
        <span>总共 {{ machineStatus.length }} 台设备</span>
        &nbsp;
        <span class="topic-cricle" style="background-color: red" />
        <span>关机 {{ machineStatus.red }} 台设备</span>
        &nbsp;
        <span class="topic-cricle" style="background-color: yellow" />
        <span>停机 {{ machineStatus.yellow }} 台设备</span>
        &nbsp;
        <span class="topic-cricle" style="background-color: green" />
        <span>开机 {{ machineStatus.green }} 台设备</span>
      </div>

      <div class="list-content">
        <div class="topic-list">
          <div class="topic-list-item" v-for="(item, index) in tableData" :key="index">
            <div class="topic-item-title">
              <span class="topic-label">
                <span class="topic-cricle" :style="{ backgroundColor: item.type }"></span>
                &nbsp;
                <span>{{ item.label ? item.label : item.topic }}</span>
              </span>

              <span class="topic-time" v-if="item.restartTotal">
                <span>累计运转</span>
                <span>{{ item.restartTotal }}次</span>
              </span>

              <span class="topic-time" v-if="item.nconfig && item.nconfig.number.length > 0">
                <span>运行时长</span>
                &nbsp;
                <span>{{ item.nconfig.number }}</span>
              </span>
            </div>
            <div class="topic-time" v-if="item.setConfig && item.setConfig.number.length > 0">
              设定时长{{ item.setConfig.number }}
            </div>
            <div class="topic-progress" v-if="item.jd">
              <el-progress
                :percentage="item.jd"
                :duration="10"
                color="#67c23a"
                :show-text="false"
                :striped-flow="true"
                :stroke-width="10"
              />
            </div>
          </div>
        </div>
      </div>
    </dv-border-box1>
  </div>
</template>

<style scoped lang="scss">
:deep(.border-box-content) {
  padding: 10px 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

$item-height: 100px;
$height: $item-height * 10;

.topic-tool {
  color: #fff;
  z-index: 2;
  width: 100%;
  background-color: #03050c;
  height: 40px;
  text-align: left;
  line-height: 40px;
}

.list-content {
  flex: 1;
  overflow: hidden;
}
.topic-cricle {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.topic-list {
  height: 100%;
  width: 100%;
  color: #fff;
  z-index: 1;
  // overflow: hidden;
  animation: 10s moveY linear infinite normal;
  -webkit-animation: 10s moveY linear infinite normal;
  &-item {
    text-align: left;
    .topic-item-title {
      display: flex;
      justify-content: space-between;
      .topic-label {
        font-weight: 700;

        text-align: left;
      }
    }

    .topic-time {
      font-size: 14px;
    }

    .topic-progress {
      margin-top: 8px;
    }

    padding: 10px 0;
    height: $item-height;
    border-bottom: 1px dashed var(--el-border-color);
  }
}

@keyframes moveY {
  0% {
    transform: translateY(-0px);
  }

  100% {
    transform: translateY(-$height);
  }
}
</style>
